<template>
	<!-- 模板部分保持不变 -->
	<view>
		<scroll-view scroll-y="true" class="scroll-wrapper">
			<view>
				<view class="wrap">
					<u-form ref="uForm">

						<view class="tibox">
							<u-form-item :label-position="labelPosition" label="小区名称" prop="villageName"
								label-width="180" :leftIconStyle="{color:'#d5d5d5'}">
								<u-input :border="border" type="text" v-model="model.villageName"
									placeholder="请选择小区(必选)" @click="showUniMap"></u-input>
							</u-form-item>

							<u-form-item label-width="150" :label-position="labelPosition" label="面积" required>
								<u-input :border="border" placeholder="请输入面积(m2)" v-model="model.houseArea"
									type="number"></u-input>
							</u-form-item>

							<u-form-item :label-position="labelPosition" label="户型" label-width="150" required>
								<u-input :border="border" type="select" :select-open="selectShow2" v-model="houseTypeVo"
									placeholder="请选择户型" @click="selectShow2 = true"></u-input>
							</u-form-item>

							<!--         楼层-->
							<u-form-item :label-position="labelPosition" label="楼层" label-width="150" required>
								<view class="flex flex-row">
									<u-input :border="border" type="select" :select-open="floorShow"
										v-model="model.floor" placeholder="请选择多少层" @click="floorShow = true"
										style="flex: 1;"></u-input>
									<u-input :border="border" type="select" :select-open="totalFloorShow"
										v-model="model.totalFloor" placeholder="请选择共多少层" @click="totalFloorShow = true"
										style="flex: 1;"></u-input>
								</view>
							</u-form-item>
						</view>

						<view class="tibox">
							<!--朝向-->
							<u-form-item label-width="150" :label-position="labelPosition" label="朝向">
								<u-input :border="border" type="select" :select-open="directionShow"
									v-model="directionVo" placeholder="请选择朝向" @click="directionShow = true"></u-input>
							</u-form-item>

							<!--赠送面积-->
							<u-form-item label-width="150" :label-position="labelPosition" label="赠送面积">
								<u-input :border="border" placeholder="请输入赠送面积(m2)" v-model="model.giveArea"
									type="number"></u-input>
							</u-form-item>

							<!--装修费用-->
							<u-form-item label-width="150" :label-position="labelPosition" label="装修费用">
								<u-input :border="border" placeholder="请输入装修费用(元)" v-model="model.decorationCost"
									type="number"></u-input>
							</u-form-item>

							<u-form-item label-width="180" :label-position="labelPosition" label="装修完成时间">
								<view class="dateBtn" @click="dateClick">
									{{dateLabel}}<u-icon name="arrow-right"></u-icon>
								</view>
							</u-form-item>
						</view>

						<view class="tibox">
							<u-form-item label-width="150" label-position="top" label="通风情况" required>
								<u-checkbox-group @change="checkboxGroupChange1" :width="radioCheckWidth"
									:wrap="radioCheckWrap">
									<u-checkbox v-model="item.checked" v-for="(item, index) in ventilationCheckboxList"
										:key="index" :name="item.name">{{ item.name }}</u-checkbox>
								</u-checkbox-group>
							</u-form-item>
						</view>

						<view class="tibox">
							<!--采光情况-->
							<u-form-item label-width="150" label-position="top" label="采光情况" required>
								<u-checkbox-group @change="checkboxGroupChange2" :width="radioCheckWidth"
									:wrap="radioCheckWrap">
									<u-checkbox v-model="item.checked" v-for="(item, index) in lightingCheckboxList"
										:key="index" :name="item.name">{{ item.name }}</u-checkbox>
								</u-checkbox-group>
							</u-form-item>
						</view>

						<view class="tibox">
							<!--楼栋位置-->
							<u-form-item label-width="150" label-position="top" label="楼栋位置" required>
								<u-checkbox-group @change="checkboxGroupChange3" :width="radioCheckWidth"
									:wrap="radioCheckWrap">
									<u-checkbox v-model="item.checked" v-for="(item, index) in positionCheckboxList"
										:key="index" :name="item.name">{{ item.name }}</u-checkbox>
								</u-checkbox-group>
							</u-form-item>
						</view>

						<view class="tibox">
							<!--噪音情况-->
							<u-form-item label-width="150" label-position="top" label="噪音情况" required>
								<u-checkbox-group @change="checkboxGroupChange4" :width="radioCheckWidth"
									:wrap="radioCheckWrap">
									<u-checkbox v-model="item.checked" v-for="(item, index) in noiseCheckboxList"
										:key="index" :name="item.name">{{ item.name }}</u-checkbox>
								</u-checkbox-group>
							</u-form-item>
						</view>

						<view class="tibox">
							<!--特殊设施-->
							<u-form-item label-width="150" label-position="top" label="特殊设施" required>
								<u-checkbox-group @change="checkboxGroupChange5" :width="radioCheckWidth"
									:wrap="radioCheckWrap">
									<u-checkbox v-model="item.checked" v-for="(item, index) in facilityCheckboxList"
										:key="index" :name="item.name">{{ item.name }}</u-checkbox>
								</u-checkbox-group>
							</u-form-item>
						</view>
					</u-form>

				</view>
			</view>
		</scroll-view>

		<!--    <u-select mode="single-column" :list="selectListCity" v-model="selectShowCity" @confirm="selectConfirmCity"></u-select>-->

		<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
		<u-select mode="single-column" :list="decorationList" v-model="decorationShow"
			@confirm="decorationConfirm"></u-select>
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>

		<!--      户型-->
		<u-select mode="mutil-column" :list="selectList2" v-model="selectShow2" @confirm="selectConfirm2"></u-select>

		<!-- 楼层选择 -->
		<u-select mode="single-column" :list="floorList" v-model="floorShow" @confirm="floorConfirm"></u-select>
		<u-select mode="single-column" :list="totalFloorList" v-model="totalFloorShow"
			@confirm="totalFloorConfirm"></u-select>

		<!--      朝向-->
		<u-select mode="single-column" :list="directionList" v-model="directionShow"
			@confirm="directionConfirm"></u-select>

		<u-calendar v-model="show" :mode="mode" @change="changeDate" max-date="2100-01-01"></u-calendar>
		<!--    <m-city-->
		<!--        :provinceData="list"-->
		<!--        headTitle="区域选择"-->
		<!--        ref="cityPicker"-->
		<!--        @funcValue="getPickerParentValue"-->
		<!--        pickerSize="4"-->
		<!--    >-->
		<!--    </m-city>-->

		<uniMap v-if="mapFlag" @close="closeMap" @callback="callBackAddress" />

		<view class="bottom-btn">
			<!--      <view class="agreement">-->
			<!--        <checkbox/> 我已阅读并接受《个人信息处理说明协议》-->
			<!--      </view>-->
			<u-button type="primary" @click="submit">立即评估</u-button>
		</view>
	</view>
</template>

<script>
	import uniMap from "@/components/uniMap";

	import {
		evaluateHouse,
		findVillageList
	} from "@/api/house.js";
	import {
		upload
	} from "@/api/common.js";
	import city from "@/components/m-city/m-city.vue";
	//import config from "@/config/config.js" // 全局配置文件
	export default {
		components: {
			"m-city": city,
			uniMap
		},
		// props: {
		//   model: Object
		// },
		data() {
			return {
				mapFlag: false,
				model: {},
				fileList: [],
				selectListCity: [],
				list: [{
					id: "",
					localName: "请选择",
					children: [],
				}, ],
				isButtonDisabled: false,
				timer: null,
				roomLabelVo: '',
				directionVo: '',
				show: false,
				mode: 'date',
				selectShow2: false,
				floorShow: false,
				totalFloorShow: false,
				selectShowCity: false,
				selectList: [{
						value: '1',
						label: '主卧'
					},
					{
						value: '2',
						label: '次卧'
					}
				],
				rentalList: [{
						value: '0',
						label: '整租'
					},
					{
						value: '1',
						label: '合租'
					},
					{
						value: '2',
						label: '短租'
					}
				],
				directionList: [{
						value: '东',
						label: '东'
					},
					{
						value: '南',
						label: '南'
					},
					{
						value: '西',
						label: '西'
					},
					{
						value: '北',
						label: '北'
					},
				],

				selectList2: [
					[{
							value: '一室',
							label: '一室'
						},
						{
							value: '二室',
							label: '二室'
						},
						{
							value: '三室',
							label: '三室'
						},
						{
							value: '四室',
							label: '四室'
						}
					],
					[{
							value: '',
							label: ''
						},
						{
							value: '一厅',
							label: '一厅'
						},
						{
							value: '二厅',
							label: '二厅'
						},
						{
							value: '三厅',
							label: '三厅'
						}
					],
					[{
							value: '',
							label: ''
						},
						{
							value: '一卫',
							label: '一卫'
						},
						{
							value: '二卫',
							label: '二卫'
						}
					],
				],
				floorList: [{
						value: '1层',
						label: '1层'
					},
					{
						value: '2层',
						label: '2层'
					},
					{
						value: '3层',
						label: '3层'
					},
					// 可按需添加更多楼层
				],
				totalFloorList: [{
						value: '1层',
						label: '1层'
					},
					{
						value: '2层',
						label: '2层'
					},
					{
						value: '3层',
						label: '3层'
					},
					// 可按需添加更多楼层
				],
				border: false,
				check: false,
				checkboxList: [{
						name: '看房方便',
						checked: false,
						disabled: false
					},
					{
						name: '独卫',
						checked: false,
						disabled: false
					},
					{
						name: '独立阳台',
						checked: false,
						disabled: false
					}

				],
				ventilationCheckboxList: [{
						name: '南北通透',
						checked: false,
						disabled: false
					},
					{
						name: '东西通透',
						checked: false,
						disabled: false
					},
					{
						name: '通风良好',
						checked: false,
						disabled: false
					},
					{
						name: '通风一般',
						checked: false,
						disabled: false
					}
				],
				lightingCheckboxList: [{
						name: '采光充足',
						checked: false,
						disabled: false
					},
					{
						name: '采光良好',
						checked: false,
						disabled: false
					},
					{
						name: '采光一般',
						checked: false,
						disabled: false
					}
				],
				positionCheckboxList: [{
						name: '小区中心',
						checked: false,
						disabled: false
					},
					{
						name: '临小区出入口',
						checked: false,
						disabled: false
					},
					{
						name: '临街',
						checked: false,
						disabled: false
					}
				],
				noiseCheckboxList: [{
						name: '无噪音',
						checked: false,
						disabled: false
					},
					{
						name: '临近主干道',
						checked: false,
						disabled: false
					},
					{
						name: '临近商业街',
						checked: false,
						disabled: false
					}
				],
				facilityCheckboxList: [{
						name: '无特殊设施',
						checked: false,
						disabled: false
					},
					{
						name: '临近垃圾场',
						checked: false,
						disabled: false
					},
					{
						name: '临近高压电',
						checked: false,
						disabled: false
					},
					{
						name: '临近工厂',
						checked: false,
						disabled: false
					},
					{
						name: '临近加油站',
						checked: false,
						disabled: false
					},
					{
						name: '临近变电站',
						checked: false,
						disabled: false
					}
				],
				actionSheetList: [{
						text: '电梯房'
					},
					{
						text: '楼梯房'
					}
				],
				selectShow: false,
				directionShow: false,
				rentalShow: false,
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				labelPosition: 'left',
				errorType: ['toast'],
				actionSheetShow: false,
				storeAddressIdPath: "",
				dateLabel: '随时入住',
				typeVo: '',
				// 图片服务器地址
				action: upload,
				siteType: ['compressed'],
			};
		},
		watch: {
			model: {
				handler(newName, oldName) {
					if (!this.model) {
						this.model = {};
					}
					// typeVo
					if (this.model.type == 0) {
						this.typeVo = '整租'
					} else if (this.model.type == 1) {
						this.type = '合租'
					} else if (this.model.type == 2) {
						this.type = '短租'
					} else if (this.model.type == 10) {
						this.type = '新房'
					}

					this.roomLabelVo = newName.roomLabel

					this.fileList = [];
					this.model.imageList.forEach(item => {
						var vo = {
							url: item.imgUrl
						}
						this.fileList.push(vo);
					})

					// 回显房源亮点
					if (this.model.featureList) {
						this.checkboxList.forEach(item => {
							this.model.featureList.forEach(feature => {
								if (feature.feature == item.name) {
									item.checked = true
								}
							})
						})
						this.directionVo = newName.direction
					}

					// 回显户型信息
					if (this.model.houseType) {
						const houseType = this.model.houseType;
						let houseNum = '';
						let houseHall = '';
						let toiletNum = '';

						const numRegex = /(一室|二室|三室|四室)/;
						const hallRegex = /(一厅|二厅|三厅)/;
						const toiletRegex = /(一卫|二卫)/;

						const numMatch = houseType.match(numRegex);
						const hallMatch = houseType.match(hallRegex);
						const toiletMatch = houseType.match(toiletRegex);

						if (numMatch) {
							houseNum = numMatch[0];
						}
						if (hallMatch) {
							houseHall = hallMatch[0];
						}
						if (toiletMatch) {
							toiletNum = toiletMatch[0];
						}

						this.model.houseNum = houseNum;
						this.model.houseHall = houseHall;
						this.model.toiletNum = toiletNum;
						this.houseTypeVo = houseType;
					}

					// 回显楼层信息
					if (this.model.floor) {
						this.model.floor = this.model.floor;
					}
					if (this.model.totalFloor) {
						this.model.totalFloor = this.model.totalFloor;
					}
				},
				immediate: true,
				deep: true
			}
		},
		mounted() {
			if (this.$options.filters.tipsToLogin()) {

			}

		},
		onLoad() {
			// this.findVillageList();
		},
		methods: {
			showUniMap() {
				this.mapFlag = true;
			}, // 关闭地图
			closeMap() {
				this.mapFlag = false;
			},
			// 打开地图并访问权限
			clickUniMap() {
				// #ifdef APP-PLUS
				if (plus.os.name == "iOS") {
					// ios系统
					permision.judgeIosPermission("location") ?
						(this.mapFlag = true) :
						this.refuseMap();
				} else {
					// 安卓
					this.requestAndroidPermission(
						"android.permission.ACCESS_FINE_LOCATION"
					);
				}
				// #endif

				// #ifndef APP-PLUS
				this.mapFlag = true;
				// #endif
			},

			// 如果拒绝权限 提示区设置
			refuseMap() {
				uni.showModal({
					title: "温馨提示",
					content: "您已拒绝定位,请开启",
					confirmText: "去设置",
					success(res) {
						if (res.confirm) {
							//打开授权设置
							// #ifndef MP-WEIXIN
							uni.getSystemInfo({
								success(res) {
									if (res.platform == "ios") {
										//IOS
										plus.runtime.openURL("app-settings://");
									} else if (res.platform == "android") {
										//安卓
										let main = plus.android.runtimeMainActivity();
										let Intent = plus.android.importClass(
											"android.content.Intent"
										);
										let mIntent = new Intent("android.settings.ACTION_SETTINGS");
										main.startActivity(mIntent);
									}
								},
							});
							// #endif
						}
					},
				});
			},

			// 获取安卓是否拥有地址权限
			async requestAndroidPermission(permisionID) {
				var result = await permision.requestAndroidPermission(permisionID);

				if (result == 1) {
					this.mapFlag = true;
				} else {
					this.refuseMap();
				}
			},

			// 选择地址后数据的回调
			callBackAddress(val) {
				console.log(val)
				// uni.showLoading({
				//   title: "加载中",
				// });
				console.info("选择地址后数据的回调" + val)
				if (val.regeocode && val) {
					let address = val.regeocode;
					//val.regeocode.addressComponent.district
					// this.model.address=address.formatted_address
					//  console.info(address+ this.address);
					console.info("选择地址后villageName" + val.name)
					this.model.villageName = val.name;
					// console.info("villageName====="+ this.villageName);
					// this.model.villageCity=address.addressComponent.province+address.addressComponent.city+address.addressComponent.district
					//console.info("villageCity====="+this.villageCity);
					// this.form.detail = address.formatted_address; //地址详情
					// this.form.___path = val.data.result.name;
					// this.form.consigneeAddressIdPath = val.data.result.id; // 地址id分割
					// this.form.consigneeAddressPath = val.data.result.name; //地址名称， '，'分割
					// this.model.latitude = val.latitude; //纬度
					//this.model.longitude = val.longitude; //经度
					uni.hideLoading();
				}

				this.mapFlag = !this.mapFlag; //关闭地图
			},

			findVillageList() {

				findVillageList({
					city: '',
					orderByColumn: 'name',
					isAsc: 'desc'
				}).then((result) => {

					const data = result.data.rows
					for (let i = 0; i < data.length; i++) {
						// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
						let item = data[i]
						this.selectListCity.push({
							label: item.name,
							value: item.id
						})
					}
					return data
				});
			},
			// getPickerParentValue(e) {
			//   // 检查 model 是否为空，若为空则初始化
			//   if (!this.model) {
			//     this.model = {};
			//   }
			//   this.model.storeAddressIdPath = [];
			//   console.log(e)
			//   let name = "";
			//   e.forEach((item, index) => {
			//     if (item.id) {
			//       // 遍历数据
			//       this.model.storeAddressIdPath.push(item.id);
			//       if (index == e.length - 1) {
			//         name += item.localName;
			//       } else {
			//         name += item.localName + ",";
			//       }
			//       this.$set(this.model, 'villageCity', name)
			//     }
			//   });
			//
			//   // this.form.storeCenter = e[e.length-1].center
			// },
			// 显示三级地址联动
			showPicker() {
				this.$refs.cityPicker.show();
			},
			submit() {
				if (this.isButtonDisabled) return;

				//
				// if (this.$u.test.isEmpty(this.model.villageName)) {
				//   uni.showToast({
				//     title: "请输入小区名称",
				//   });
				//   return
				// }
				// if (this.$u.test.isEmpty(this.model.roomArea)) {
				//   uni.showToast({
				//     title: "请输入房屋面积",
				//   });
				//   return
				// }


				evaluateHouse(this.model).then((result) => {

					if (result.data.code == 200) {
						this.isButtonDisabled = true;

						// 设置定时器，5秒后重新启用按钮
						this.timer = setTimeout(() => {
							this.isButtonDisabled = false;
						}, 5000);


						this.$u.route({
							url: 'pages/house/detail/info?clerkId=' + result.data.data.clerkId,
						})

						// this.$u.route({
						//   url: 'pages/house/order',
						// })
					} else {
						uni.showToast({
							title: result.data.msg,
						});
					}

				});





			},
			// 选择类型回调
			selectConfirm(e) {
				this.model.roomLabel = ''
				this.model.roomType = ''
				e.map((val, index) => {
					this.model.roomLabel += val.label;
					this.model.roomType += val.value;
				})
				this.roomLabelVo = this.model.roomLabel
			},
			directionConfirm(e) {
				e.map((val, index) => {
					this.model.direction = val.label;
					this.directionVo = val.label;
				})
			},
			floorConfirm(e) {
				e.map((val, index) => {
					this.model.floor = val.label;
				})
			},
			totalFloorConfirm(e) {
				e.map((val, index) => {
					this.model.totalFloor = val.label;
				})
			},
			selectConfirm2(e) {
				this.model.houseType = ''
				e.map((val, index) => {
					if (index == 0) {
						this.model.houseNum = val.label;
					} else if (index == 1) {
						this.model.houseHall = val.label;
					} else if (index == 2) {
						this.model.toiletNum = val.label;
					}
					this.model.houseType += val.label;
					this.houseTypeVo = this.model.houseType
				})
			},
			rentalConfirm(e) {

				e.map((val, index) => {
					this.model.type = val.value;
					this.typeVo = val.label;
				})
			},


			// 点击actionSheet回调
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.model.stepType = this.actionSheetList[index].text;
			},

			checkboxGroupChange1(e) {
				this.model.ventilation = e.toString();
			},
			checkboxGroupChange2(e) {
				this.model.light = e.toString();
			},
			checkboxGroupChange3(e) {
				this.model.location = e.toString();
			},
			checkboxGroupChange4(e) {
				this.model.noise = e.toString();
			},
			checkboxGroupChange5(e) {
				this.model.facility = e.toString();
			},
			borderChange(index) {
				this.border = !index;
			},
			labelPositionChange(index) {
				this.labelPosition = index == 0 ? 'left' : 'top';
			},
			codeChange(text) {
				this.codeTips = text;
			},
			dateClick() {
				this.show = true
			},
			changeDate(e) {
				this.model.startDate = e.result
				this.dateLabel = e.result
			},

		}
	};
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style scoped lang="scss">
	page {
		background-color: rgb(245, 245, 245);
		// padding: 32rpx;
	}

	.wrap {
		padding: 30rpx;

		.tibox {
			width: 100%;
			background-color: #FFF;
			border-radius: 16rpx;
			padding: 0 32rpx;
			margin-bottom: 24rpx;
		}
	}

	.scroll-wrapper {
		position: absolute;
		left: 0rpx;
		right: 0rpx;
		top: 0rpx;
		bottom: 120rpx;
	}

	.bottom-btn {
		position: fixed;
		bottom: 8rpx;
		width: 100%;
		padding: 30rpx;
		border-top: 1rpx solid #ccc;
		background-color: #FFFFFF;
	}

	.dateBtn {
		position: absolute;
		right: 0rpx;
		top: 10rpx;
		color: #606266;
	}

	.slot-btn {
		width: 160rpx;
		height: 160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	.custom-gap {
		width: 1000rpx;
		height: 10rpx;
		margin: 0 -200rpx 0 -200rpx;
		background-color: rgb(235, 236, 238);
	}

	.agreement {
		margin-bottom: 20px;
		margin-left: 4%;
	}
</style>